// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import '../common/styles/common.scss';

.details-view-body {
    height: 100%;
}

.details-view-content-pane-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 1px;
    box-sizing: border-box;
    width: calc(100vw - (#{$details-view-left-nav-width}));
    height: 100%;
    max-height: calc(100vh - (#{$details-view-header-bar-height}));

    &.narrow-mode {
        width: 100%;
    }
}

.details-view-body-nav-content-layout {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: stretch;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    min-height: 0;
    height: 100%;

    :global(.ms-Pivot) {
        border-bottom: 1px solid $neutral-8;
        padding-left: 12px;
    }

    .details-view-body-content-pane {
        display: flex;
        flex-direction: column;
        height: 100%;
        word-break: break-word;
        width: 100%;
        overflow: auto;
        box-sizing: border-box;
        max-height: calc(100vh - (#{$details-view-total-header-height}));

        > div {
            width: 100%;
            height: auto;
        }

        :global(.ms-MessageBar-icon) i {
            margin-left: 12px;
            color: $always-black;
            @include ms-high-contrast-override {
                color: inherit;
            }
        }

        :global(.ms-MessageBar-text .insights-link) {
            color: inherit !important;
            text-decoration: underline;
        }

        .view {
            flex-grow: 1;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            min-height: 0;

            h1 {
                margin: 0;
                font-weight: $font-weight-semi-bold;
                font-size: 21px;
                color: $neutral-100;
            }

            b {
                font-weight: 600;
            }
        }
    }
}
